import { defineStore } from 'pinia'
import { ref, shallowRef } from 'vue'
import MainLayout from '@/layout/layout-shelf/MainLayout.vue'
import ComLayout from '@/layout/layout-shelf/com-layout.vue'
import comScssColor from '@/assets/styles/variables.module.scss'

const customLayoutStore = defineStore('customLayout', () => {
  // aside 宽度
  const asideWidth = ref('220px')
  // 自定义动画 --- > 防止 menu 出现 延迟
  const asideStyle = {
    transition: 'all .3s',
    overflowX: 'hidden',
    background: ''
  }
  const showLogo = ref(true)
  // header 高度
  const headerHeight = ref(comScssColor.comHeaderHeight)
  // header 背景 颜色
  const headerStyle = {
    background: '#017365'
  }
  // 面包屑导航 高度
  const breadcrumbHeight = ref(comScssColor.breadCrumbHeight)
  // 是否 显示 面包屑 导航
  const showBread = ref(true)
  // 动态面包屑
  const showTabs = ref(true)

  const collapsed = ref(false)
  // https://juejin.cn/post/7235906062310473784
  // 使用 shallowRef  解决 使用vue3动态组件的时候，需要使用shallowRef进行包裹组件id，用于动态切换组件，
  // 不然会报错误：App.vue:12 [Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead,
  // and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref
  const defaultLayout = shallowRef<any>(ComLayout)
  const showMainLayoutFooter = ref(true)

  // 第三种布局
  const showLayoutSecondFooter = ref(true)
  const layoutSecondStyle = {
    transition: 'all .3s'
  }

  const layoutMap = new Map([
    [
      'MainLayout',
      {
        component: MainLayout
      }
    ],
    [
      'ComLayout',
      {
        component: ComLayout
      }
    ]
  ])

  const changeCollapsed = (value: boolean) => {
    collapsed.value = value
    if (collapsed.value) {
      asideWidth.value = '60px'
    } else {
      asideWidth.value = '220px'
    }
  }

  const getLayout = (key: string, isView: boolean) => {
    defaultLayout.value = layoutMap.get(key)?.component
    showMainLayoutFooter.value = isView
  }

  const getSecondLayout = (key: string, isView: boolean) => {
    defaultLayout.value = layoutMap.get(key)?.component
    showLayoutSecondFooter.value = isView
  }

  const toggleLogo = (isShowLogo: boolean) => {
    showLogo.value = isShowLogo
  }

  const toggleBread = (isShowBread: boolean) => {
    showBread.value = isShowBread
  }

  const toggleTabs = (value: boolean) => {
    showTabs.value = value
  }

  return {
    asideWidth,
    headerHeight,
    breadcrumbHeight,
    showBread,
    collapsed,
    changeCollapsed,
    asideStyle,
    getLayout,
    showLogo,
    defaultLayout,
    toggleLogo,
    toggleBread,
    showLayoutSecondFooter,
    layoutSecondStyle,
    getSecondLayout,
    showMainLayoutFooter,
    headerStyle,
    showTabs,
    toggleTabs
  }
})

export { customLayoutStore }
